@import './vw';
@import './common';

header{
  .menu{
    position: absolute;
    left: vw(22);
    top: vw(34);
    width: vw(30);
    height: vw(23);
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    
    .line{
      width: 100%;
      height: vw(4);
      background-color: #fff;
    }
    .message{
      width: vw(26);
      height: vw(26);
      border-radius: 50%;
      background-color: red;
      position: absolute;
      right: vw(-13);
      top: vw(-13);
      font-size: vw(8);
      color: #fff;
      text-align: center;
      line-height: vw(26);
    }
  }
}
.content{
  &::after,&::before{
    content: '';
    display: block;
    visibility: hidden;
  }
  // &::before{
  //   height: vw(90);
  // }
  &::after{
    height: vw(96);
  }
  .article-content{
    padding: vw(42) vw(28) 0 ;
    h2{
      margin-bottom: vw(15);
      font-size: vw(30);
      color: #010101;
      font-weight: bold;
      line-height: vw(34);
    }
  
  

    .watch-box{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      // text-align: right;
      font-size: vw(20);
      color:#c5c5c5;

      span{
        img{
          margin-right: vw(6);
        }
      }

      span:first-child{

        img{
          width: vw(21);
        }
      }
      span:last-child{
        margin-left: vw(44);
        img{
          width: vw(25);
        }
      }
    }
    .time-box{
      color: #c5c5c5;
      font-size: vw(22);
      text-align: right;
      margin-top: vw(10);
      span{
        margin-left: vw(17);
        color: red;
      }
    }
    .abstract{
      margin-top: vw(36);
      font-size: vw(20);
      color: #8b8b8b;
      text-indent: 2em;
      line-height: vw(28);
     
    }
    .abstract1{
      font-size: vw(20);
      color: #8b8b8b;
      line-height: vw(28);
    }
    .abstract2{
      text-indent: 2em;
      font-size: vw(20);
      color: #8b8b8b;
      line-height: vw(28);
    }
    .abstract3{
      margin-top: vw(36);
      font-size: vw(20);
      color: #8b8b8b;
      line-height: vw(28);
    }


    h3{
      font-size: vw(20);
      font-weight: 600;
      margin-top: vw(36);
      text-indent: 2em  ;
      line-height: vw(26);
      // &::before{
      //   content: '222';
      //   visibility: hidden;
      // }
      
    }
    .ad{
      width: 100%;
      margin-top: vw(15);
    }
    .handle-img{
      width: vw(583);
      img{
        width: 100%;
      }
    }
    .new-h3{
      font-size: vw(20);
      font-weight: 600;
      margin-top: vw(36);
      line-height: vw(26);
    }

  }
    
    
  

  .prev-box{
    border-top: vw(19) solid #efefef;
    border-bottom: vw(19) solid #efefef;
    padding:vw(30) 0 vw(30) vw(29);
    font-size: vw(18);
    color: #727171;
    line-height: vw(21);
    span{
      font-size: vw(21);
      // background-color: ;
      font-weight: bold;
    }
  }

  .share-box{
    
    display: flex;
    justify-content: space-between;
    
    width: vw(326);
    margin: vw(38) auto vw(50);
    
  
    .share-wrapper{
      font-size: vw(20);
      color:#8b8b8b;
      text-align: center;
    }

    .share-item{
      margin-bottom: vw(8);
      display: flex;
      justify-content: center;
      align-items: center;
      width: vw(72);
      height: vw(72);
      border: 1px solid #8b8b8b;
      border-radius: 50%;
      text-align: center;
      line-height: vw(72);
      img{
        width: 50%;
      }
    }
  }
  .comment{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: vw(583);
    height: vw(193);
    border: 1px solid #c9c9c9;
    // text-align: center;
    font-size: vw(20);
    color: #8b8b8b;
    a{
      margin-right: vw(6);
      color: #b20000;
      text-decoration: underline;
    }
  }
  .comment-btn{
    display: block;
    margin: vw(16) auto vw(48);
    width: vw(395);
    height: vw(53);
    
    background-color: #b20000;
    font-size: vw(26);
    color: #fff;
    line-height: vw(53);
    // text-align: center;
    border: none;
    outline: none;
  }

  .comment-area{
    padding: 0 vw(28);
    .comment-number{
      font-size: vw(18);
      color: #727171;
      ins{
        margin: 0 vw(4);
      }
    }
  }

  .comment-user{
    margin-top: vw(25);
    margin-left: vw(34);
    margin-bottom: vw(13);
    display: flex;
    align-items: center;

    .user-icon{
      margin-right: vw(12);
      width: vw(50);
      height: vw(50);
      // border-radius: 50%;
      // background-color: red;
      img{
        width: 100%;
        border-radius: 50%;
      }
    }
    .user-name{
      margin-right: vw(6);
      font-size: vw(18);
      color: #444;
    }
    .time{
      font-size: vw(18);
      color: #b2b2b2;
    }
    
  }
  .comment-content{
    display: flex;
    flex-direction: column;
    
    width: vw(535);
    margin: 0 auto;
    // border-bottom: 1px dashed #c9c9c9;
    // padding-bottom: vw(26);
    &::after{
      content: '';
      display: block;
      border-bottom: 1px dashed #c9c9c9;
      margin: 0 -20px;
      padding-bottom: vw(26);
    }
    .content-title{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      span:first-child{
        font-size: vw(22);
        
      }
      span:last-child{
        font-size: vw(18);
        color: #b2b2b2;
      }
    }
    .content-reply{
      font-size: vw(19);
      text-align: right;
      margin-top: vw(20);
    }
    .content-communicate{
      width: vw(535);
      height: vw(376);
      margin-top: vw(6);
      background-color: #fafafa;

      .item{
        display: flex;
        flex-direction: column;
        height: vw(110);
        padding-top: vw(19);
        padding-right: vw(8);
        
        border-bottom: 1px dashed #c9c9c9;
        .item-user{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .user-box{
            font-size: vw(18);
            img{
              border-radius: 50%;
              width: 100%;
            }

          }
          .user-box:first-child{
            width: vw(40);
            height: vw(40);
            margin-left: vw(21);
            margin-right: vw(15);
          }
          .user-box:last-child{
            margin-left: vw(21);
          }
        }
        .item-time{
          font-size: vw(18);
          color: #b2b2b2;
          display: flex;
          justify-content: flex-end;
          margin-top: vw(25);
        }
      }
      .item:nth-child(2){
        .item-user{
          height: vw(49);

          .user-box:first-child{
            display: flex;
            flex-shrink: 0;
            
          }
          
         
          // .user-box:last-child{
          //   display: flex;
          //   margin-left: vw(9);
          //   // flex-wrap: wrap;
          //   // height: vw(49);
          //   // flex-basis:vw(49);
          // }

          .user-bigbox{
            display: flex;
            align-items: center;
            font-size: vw(18);

            .box:last-child{
              // padding: vw(5) vw(5);
              // margin:0;
              padding-top: vw(20);
              margin-left: vw(9);
            }
          }


        }
        
      }
      .item:last-child{
        position: relative;
        height: vw(155);
        border-bottom: none;
        display: flex;
        flex-direction: column;
        padding-right: 0;
        textarea{
          
          
          margin: 0 auto;
          height: vw(72);
          width: vw(498);
          border: 1px solid red;
          font-size: vw(18);
          color: #444444;
          
        }
        p{
          font-size: vw(12);
          color: #b2b2b2;
          position: absolute;
          right: 17px;
          top: 28px;
        }
        button{
          margin-top: vw(8);
          margin-left: vw(342);
          width: vw(174);
          height: vw(45);
          background-color: #b20000;
          font-size: vw(20);
          color: #ffffff;
          border: none;
          outline: none;
          text-align: center;

        }
      }
      
    }
  }
  // .comment-content:last-of-type{
  //   &::after{
  //     content: '';
  //     display: block;
  //     border-bottom: 1px solid #c9c9c9;
  //     margin: 0 -20px;
  //     padding-bottom: vw(26);
  //     }
  // } 

  .more{
    display: flex;
    margin-top: vw(18);
    font-size: vw(22);
    color: #bbbbbb;
    justify-content: center;
    align-items: center;
  }

}
